<!DOCTYPE html>
<html>

<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>user 模块 </title>
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">

    <!--    引入js文件
            可以引入很多的 js文件
            引入了 vue / axios js文件

     -->
    <script src="/pages/base.js"></script>


</head>

<body>
<div id="frameContent" class="content-wrapper" style="margin-left:0px; height: 500px">
<section class="content-header">
    <h1>
        用户管理
        <small>用户列表</small>
    </h1>
    <ol class="breadcrumb">
        <li><a href="/pages/home/home.html"><i class="fa fa-dashboard"></i> 首页</a></li>
    </ol>
</section>
<!-- 内容头部 /-->

<!-- 正文区域 -->
<section class="content">
    <!-- .box-body -->
    <div class="box box-primary" id="app">
        <div class="box-header with-border">
            <h3 class="box-title">列表</h3>
        </div>

        <div class="box-body">

            <!-- 数据表格 -->
            <div class="table-box">
                <!--工具栏-->
                <div class="pull-left">
                    <div class="form-group form-inline">
                        <div class="btn-group">
                            <button type="button" class="btn btn-default" title="新建"
                                    onclick='location.href="/pages/user/user-add.html"'><i class="fa fa-file-o"></i> 新建</button>
                        </div>
                    </div>
                </div>
                <div class="box-tools pull-right">
<!--                    <div class="has-feedback">-->
<!--                        <input type="text" class="form-control input-sm" placeholder="搜索">-->
<!--                        <span class="glyphicon glyphicon-search form-control-feedback"></span>-->
<!--                    </div>-->
                </div>

                <!--工具栏/-->
                <!--数据列表-->
                <table id="dataList" class="table table-bordered table-striped table-hover dataTable">
                    <tr>
                        <th class="sorting">用户编号</th>
                        <th class="sorting">用户名</th>
                        <th class="sorting">密码</th>
                        <th class="text-center">操作</th>
                    </tr>
                    <tr v-for="(user,index) in users" :key="index">
                        <td >{{user.uid}}</td>
                        <td >{{user.username}}</td>
                        <td >{{user.password}}</td>
                        <td class="text-center">
                            <button @click="delUser(user.uid)">删除</button>
                            &nbsp;&nbsp;&nbsp;&nbsp;
                            <button @click="updateUser(user.uid)">修改</button>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        <!-- /.box-body -->

        <!-- .box-footer-->
        <div class="box-footer">
            <div class="pull-left">
                <div class="form-group form-inline">
                </div>
            </div>

<!--            <div class="box-tools pull-right">-->
<!--                <ul class="pagination">-->
<!--                    <li>-->
<!--                        <a href="#" aria-label="Previous">首页</a>-->
<!--                    </li>-->
<!--                    <li>-->
<!--                        <a href="#" >上一页</a>-->
<!--                    </li>-->
<!--                    <li>-->
<!--                        <a href="#" >下一页</a>-->
<!--                    </li>-->
<!--                    <li>-->
<!--                        <a href="#" aria-label="Next">尾页</a>-->
<!--                    </li>-->
<!--                </ul>-->
<!--            </div>-->

        </div>
        <!-- /.box-footer-->
    </div>
</section>
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            users:[],
        },
        methods:{
            // 修改
            updateUser(uid){
                localStorage.setItem("uid",uid);
                location.href = "/pages/user/user-update.html";
            },

            delUser(uid){
                axios({
                    method:"delete",
                    url:"http://localhost:8080/users/" + uid
                })
                .then(resp=>{
                        if (resp.data.code == 100000){
                            this.findUsers();
                        }
                });
            },
            findUsers(){
                axios(
                    {
                        method:"GET",
                        url:"http://localhost:8080/users"
                    }
                ).then(resp=>{
                        console.log(resp.data);
                        this.users = resp.data.data;
                })
            }
        },
        created(){
            console.log("created 操作 ");
            this.findUsers();
        }
    });
</script>
</body>
</html>